{extend name="layout/main" /}

{block name="header"}

{/block}

{block name="content"}

<div class="content-wrap ">
    <div class="row" style="height: 100%;">
        <div class="col-lg-6 col-md-3" style="padding-left: 0; height: 100%;padding: 10px;background-color: #fff;width:48%">
            <div id="container" style="height: 100%;"></div>
        </div>
        <div class="col-lg-6 col-md-3" style="padding-left: 0; height: 100%;padding: 10px;background-color: #fff;margin-left: 1%;">
            <div class="panel-body" id="container1" style="height: 100%;"></div>
        </div>
    </div>
</div>

    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

    <script type="text/javascript">
        var sums = <?php echo $sums;?>;

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        option = null;
        option = {
            title : {
                text: '站点比例',
                subtext: '客户开通站点的比例',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['百度小程序','微信小程序','支付宝小程序']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:sums.baidu, name:'百度小程序'},
                        {value:sums.wechat, name:'微信小程序'},
                        {value:sums.alipay, name:'支付宝小程序'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

        var stack = <?php echo $stack; ?>;
        var dom1 = document.getElementById("container1");
        var myChart = echarts.init(dom1);
        option1 = null;
        option1 = {
            title: {
                text: '充值/消费走势 （近一周）'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['充值','消费']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: stack.dates
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'充值',
                    type:'line',
                    stack: '笔数',
                    data:stack.recharge
                },
                {
                    name:'消费',
                    type:'line',
                    stack: '笔数',
                    data:stack.deduction
                }
            ]
        };

        if (option1 && typeof option1 === "object") {
            myChart.setOption(option1, true);
        }
    </script>
{/block}